<template>
	<el-container class="layout-container">
		<el-header class="header">
			<div class="header-content">
				<span></span>
				<h1>校园信息管理系统</h1>
				<div class="user-info">
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							<el-avatar icon="el-icon-user-solid"></el-avatar>
							<span>管理员</span>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="register">注册</el-dropdown-item>
							<el-dropdown-item command="login">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</el-header>
		<el-container>
			<el-aside width="200px" class="sidebar">
				<el-menu
					router
					:default-active="$route.path"
					background-color="#545c64"
					text-color="#fff"
					active-text-color="#ffd04b"
				>
					<el-menu-item index="/home">
						<i class="el-icon-menu"></i>
						<span>首页</span>
					</el-menu-item>
					<el-menu-item index="/home/student">
						<i class="el-icon-document"></i>
						<span>学生管理</span>
					</el-menu-item>
					<el-menu-item index="/home/new">
						<i class="el-icon-setting"></i>
						<span>校园新闻</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main class="main-content">
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
export default {
	name: 'home',
	methods: {
		handleCommand(command) {
			if (command === 'login') {
				this.goToLogin();
			} else if (command === 'register') {
				this.goToRegister();
			}
		},
		goToLogin() {
			this.$router.replace('/login');
		},
		goToRegister() {
			this.$router.replace('/register');
		},
	},
};
</script>

<style scoped>
.layout-container {
	height: 100vh;
}

.header {
	background-color: #409eff;
	color: #fff;
	padding-left: 200px;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}

.user-info {
	display: flex;
	align-items: center;
}

.el-dropdown-link {
	display: flex;
	align-items: center;
	color: #fff;
	cursor: pointer;
}

.el-dropdown-link span {
	margin-left: 10px;
}

.sidebar {
	background-color: #545c64;
}

.main-content {
	padding: 20px;
	background-color: #f5f7fa;
}

.welcome {
	font-size: 24px;
	text-align: center;
	padding: 50px 0;
}

.el-dropdown-menu__item {
	cursor: pointer !important;
}
</style>
